<template>
  <div class="grjbxx_allbox">
    <div class="item_box_jbxx grhyjbxx">
      <el-collapse v-model="activeNames">
        <el-collapse-item name="1">
          <template slot="title">
            <div style="text-align: center; width: 100%">人员信息</div>
          </template>
          <list
            class="childComp"
            ref="childComp"
            :column="3"
            :list.sync="FormData.list"
            :bt="bt"
          >
          </list>
          <div class="ryxx_zs_box" v-for="(item, index) in qtlist" :key="index">
            <div class="ryxx_zs_item">
              <div class="ryxx_zs_item_title">其他类型证书</div>
              <el-input
                v-model="item.name"
                placeholder="请输入其他类型证书"
                :disabled="qtlistdis"
              ></el-input>
            </div>
            <div class="ryxx_zs_item">
              <div class="ryxx_zs_item_title">其他证书号</div>
              <el-input
                v-model="item.code"
                placeholder="请输入其他证书号"
                :disabled="qtlistdis"
              ></el-input>
            </div>
            <div class="xyb" @click="del1(item.ids)">删除</div>
          </div>

          <div class="addbook" @click="handleClick()">
            <span>添加其他类型证书</span>
          </div>

          <list :column="3" :list.sync="FormData.dwlist" :bt="bt"> </list>
        </el-collapse-item>
        <el-collapse-item name="2">
          <template slot="title">
            <div class="colltitle"><span>寸照</span><span>签名样</span></div>
          </template>
          <uploaditem
            class="collimg_box"
            :list="FormData.uploadlist"
          ></uploaditem>
        </el-collapse-item>
        <el-collapse-item title="发票信息" name="3">
          <template slot="title">
            <div class="colltitle">
              <span>土地估价专业人员资格证</span
              ><span>土地 (不动产)登记代理人证书</span>
            </div>
          </template>
          <uploaditem
            class="collimg_box"
            :list="FormData.uploadlist_2"
          ></uploaditem>
        </el-collapse-item>
        <el-collapse-item name="4">
          <template slot="title">
            <div style="text-align: center; width: 100%">其他资格</div>
          </template>
          <div class="table_grjbxx">
            <el-table :data="tableData" stripe fit>
              <el-table-column width="135" type="index" label="序号">
              </el-table-column>
              <el-table-column prop="name" label="名称"> </el-table-column>
              <el-table-column prop="code" label="资质证号"> </el-table-column>
              <el-table-column prop="cert_images" label="证书扫描件">
                <template slot-scope="scope">
                  <el-image
                    style="width: 39px; height: 34px"
                    :src="$self.imgurl(scope.row.cert_images[0])"
                    :preview-src-list="$self.imglisturl(scope.row.cert_images)"
                  >
                  </el-image>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="135">
                <template slot-scope="scope">
                  <!-- <el-button @click="open(2, scope.row)" type="text"
                    >修改</el-button
                  > -->
                  <el-button @click="del(scope.row)" type="text"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <div class="table_add_box">
              <div class="table_add" @click="open(1)">
                添加 <i class="el-icon-plus"></i>
              </div>
            </div>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <div class="button_box_jb">
      <div class="zc" @click="Submit(1)">
        提交
      </div>
    </div>

    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="40%"
      @close="close()"
    >
      <el-descriptions class="qtzz_tc_box" :column="1" border>
        <el-descriptions-item>
          <template slot="label">
            名称
          </template>
          <el-input v-model="form.name" placeholder="请输入名称"></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            资质证号
          </template>
          <el-input v-model="form.code" placeholder="请输入资质证号"></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            上传证书扫描件
          </template>
          <uploaditem class="qtzz_tc_img" :list="list"></uploaditem>
        </el-descriptions-item>
      </el-descriptions>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="additem()">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import list from "../../components/list.vue";
import upload from "../../components/upload.vue";
import { mapState, mapMutations } from "vuex";

export default {
  data() {
    return {
      activeNames: ["1", "2", "3", "4"], //展开的页面

      bt: "",
      num: 0,
      qtlist: [
        {
          name: "",
          code: "",
        },
      ],
      qtlistdis: false,
      vmodel: [
        "realname", //姓名
        "gender", //性别 0女 1男
        "political_outlook", //政治面貌
        "nation", //民族
        "birthday", //出生日期
        "code", //身份证号
        "speciality", //专业
        "title", //职称
        "education", //学历
        "mechanism_name", //机构名称(所在单位)
        "duties", //职务
        "address", //通讯地址
        "postal_code", //邮政编码
        "mobile", //电话
        "email", //电子邮箱
        "land_valuation_code", //土地估价专业人员资格证号
        "registration_code", //不动产登记代理人（含土地登记代理人）资格证号
        "real_estate_code", //房地产估价专业人员资格证号
        "property_code", //资产评估师资格证号
        "mining_industry_code", //矿业权评估师资格证号
        "insure_code", //保险公估人员资格证号
        "broker_code", //房地产经纪人资格账号
        // ========（此处缺少证书）
        "career_resume", //从业简历
        "research_findings", //获得奖励或研究成果
        "avatar", //寸照
        "signature_images", //签名照
        "evaluate_images", //土地估价专业人员资格证
        "agent_images", //土地（不动产）登记代理人证书
      ],
      title: "标题",
      dialogVisible: false,
      form: {
        name: "",
        code: "",
        cert_images: "",
      },
      type: "", //判断是添加或则编辑
      list: [
        {
          value: {
            dialogVisible: false,
            dialogImageUrl: "",
          },
          type: "upload",
          notes1: "",
          notes: "(400-600k大小, 图像清晰，比例合理，不变形。)",
          imglist: [],
          disabled: false,
        },
      ],
      tableData: [],
    };
  },
  computed: {
    ...mapState({
      FormData: (state) => state.grryFormData,
    }),
  },
  mounted() {
    this.getinfo();
    this.getuseradd()
  },
  components: {
    list: list,
    uploaditem: upload,
  },
  methods: {
    ...mapMutations(["setgrryFormData"]),

    //获取编辑信息
    getinfo() {
      let that = this;
      // console.log(that.FormData);
      let data = {};
      that.$http.post("user/user_edit_list", data).then((res) => {
        if (res.code == 1) {
          let FormData = JSON.parse(JSON.stringify(that.FormData));
          let resdata = JSON.parse(JSON.stringify(res.data));
          let vmodel = JSON.parse(JSON.stringify(that.vmodel));

          // console.log(JSON.stringify(FormData))

          let formdata = that.$self.getdata(FormData, resdata, vmodel);
          // console.log(JSON.stringify(formdata))
          that.setgrryFormData(formdata);
          that.qtlist = res.data.othercertificate;
          // that.tableData = res.data.useradd;
        }
      });
    },
    //获取其他资格列表接口
    getuseradd() {
      let that = this;
      // console.log(that.FormData);
      let data = {};
      that.$http.post("user/useradd_list", data).then((res) => {
        if (res.code == 1) {
          that.tableData = res.data;
        } else {
          that.tableData = [];
        }
      });
    },

    //添加其他证书账号
    handleClick() {
      this.num++;
      let obj = {
        ids: this.num,
        name: "",
        code: "",
      };
      this.qtlist.push(obj);
      // console.log("元素被点击了", this.qtlist);
    },
    //删除其他证书账号
    del1(ids) {
      for (let i = 0; i < this.qtlist.length; i++) {
        if (ids == this.qtlist[i].ids) {
          this.qtlist.splice(i, 1);
        }
      }
    },

    /**
     * 保存信息
     */
    Submit(e) {
      // console.log(this.qtlist)
      let that = this;
      let other = [];
      that.qtlist.forEach((item, index) => {
        let obj = {
          name: item.name,
          code: item.code,
        };
        other.push(obj);
      });
      // console.log(JSON.stringify(that.FormData),'=-=-=-')
      let data = that.$self.Submit(that.FormData, that.vmodel);
      data["other"] = other;
      data["type"] = e;
      // console.log(data)
      that.$http.post("user/muser_profile", data).then((res) => {
        that.$self.ts(res, 2).then(() => {
          that.getinfo();
        });
      });
    },
    /**
     * 打开弹窗
     */
    open(e, item) {
      this.type = e;
      if (this.type == 1) {
        this.title = "添加其他资质";
      } else {
        this.title = "编辑其他资质";
        if (item) {
          let ele = JSON.parse(JSON.stringify(item));
          this.list[0].imglist = this.$self.showimg(
            this.$self.imglisturl(ele.cert_images)
          );
          // console.log(this.list);
          this.form = item;
          // console.log(this.form)
        }
      }
      this.dialogVisible = true;
    },

    /**
     * 关闭弹窗，清除数据
     */
    close() {
      this.form = {
        name: "",
        code: "",
        cert_images: "",
      };
      this.list[0].imglist = [];
    },
    /**
     * 添加、编辑的
     */
    additem() {
      // console.log(this.list)
      let arr = [];
      this.list[0].imglist.forEach((item, index) => {
        if (item.response) {
          arr.push(item.response.data.url);
        } else {
          const url = new URL(item.url);
          arr.push(url.pathname);
        }
      });
      let data = this.form;
      data.cert_images = arr.join(",");
      // console.log(data)
      let pathurl = "";
      if (this.type == 1) {
        pathurl = "user/useradd_add";
        this.title = "添加其他资质";
      } else {
        pathurl = "user/user_edit_list";
        this.title = "编辑其他资质";
      }
      this.$http.post(pathurl, data).then((res) => {
        this.$self.ts(res, 3).then(() => {
          // this.getinfo();
          this.getuseradd();
          this.dialogVisible = false;
        });
      });
    },
    /**
     *
     * @param {当前修改内容的信息} e
     */
    del(e) {
      let data = {
        id: e.id,
      };
      let msgg = {
        code: 1,
        msg: `您确定要将${e.name}从您机构删除吗？`,
      };
      this.$self.ts(msgg, 2).then(() => {
        this.$http.post("user/del_useradd", data).then((res) => {
          this.$self.ts(res, 3).then(() => {
            this.getuseradd();
            this.dialogVisible = false;
          });
        });
      });
    },
    //  ==
  },
};
</script>
<style>
.item_box_jbxx .el-textarea.is-disabled .el-textarea__inner {
  background: #ffffff;
  color: #000;
  padding: 0;
}
.item_box_jbxx .el-collapse-item__header {
  height: 0.55rem;
  background: #1954a4;
  font-size: 0.2rem;
  font-weight: bold;
  color: #ffffff;
  padding-left: 0.3875rem;
  box-sizing: border-box;
}
.item_box_jbxx .el-collapse-item:last-child .el-collapse-item__content {
  padding-bottom: 0px;
}
.item_box_jbxx {
  margin-left: 0.625rem;
}
.grhyjbxx .zxpj_br_list .highlight,
.labelclass,
.contentclass {
  background: #f2f2f2 !important;
}
.grhyjbxx .zxpj_br_list .labelclass {
  padding-left: 0.1375rem !important;
}
.childComp .my-label_jb {
  width: 2.7rem;
  font-size: 0.2rem;
  color: #333 !important;
}
.childComp .el-input {
  height: 100%;
}
.childComp .el-input__inner {
  height: 56px;
  padding: 0;
}
.childComp .el-descriptions :not(.is-bordered) .el-descriptions-item__cell {
  padding-bottom: 0;
}
.childComp .el-descriptions .is-bordered .el-descriptions-item__cell {
  padding: 0px 10px;
}
.ryxx_zs_box .el-input__inner {
  border: none;
  border-radius: none;
}

.table_grjbxx {
  /* border: 1px solid #f2f2f2;
  border-bottom: none; */
  min-height: 150px !important;
}
.table_grjbxx .el-table__header thead th {
  background-color: #ebf2fc !important;
  height: 0.625rem;
  font-size: 0.2rem;
  font-weight: 400;
  color: #1954a4;
  line-height: 0.375rem;
  text-align: center;
}
.table_grjbxx .el-table__body-wrapper tbody td {
  text-align: center;
  font-size: 0.2rem;
  color: #333 !important;
}
.grjbxx_allbox .el-collapse-item__wrap {
  border: none;
}

.grjbxx_allbox .qtzz_tc_box .is-bordered .el-descriptions-item__cell {
  padding: 0;
}
.grjbxx_allbox .qtzz_tc_box .el-descriptions-item__label.is-bordered-label {
  background: #ffffff;
  width: 18%;
  text-align: center;
}
.grjbxx_allbox
  .qtzz_tc_box
  .is-bordered
  .el-descriptions-item__cell
  .el-input__inner {
  border: none;
}
.grjbxx_allbox .qtzz_tc_box .is-bordered-label {
  padding: 10px !important;
}
.grjbxx_allbox .qtzz_tc_img .upload_box {
  margin: 0.125rem 0 0.125rem 0.1875rem;
}
.grjbxx_allbox .qtzz_tc_img .upload_box > div {
  width: 100%;
}
.grjbxx_allbox .qtzz_tc_img .jnhfxq2_pz_uploadbox {
  text-align: left;
}
.grjbxx_allbox .qtzz_tc_img .notes1_box {
  margin: 0;
}
.grjbxx_allbox .qtzz_tc_img .notes_box {
  text-align: left;
  margin: 0;
  margin-top: 0.125rem;
}
.grjbxx_allbox
  .childComp
  .el-descriptions
  .is-bordered
  .el-descriptions-item__label {
  text-align: center !important;
}
.grjbxx_allbox .el-descriptions-item__label {
  text-align: center !important;
}
.grjbxx_allbox .el-descriptions .is-bordered .el-descriptions-item__cell {
  font-size: 0.2rem;
  color: #333 !important;
}
.grjbxx_allbox .el-descriptions-item__content .el-input__inner {
  font-size: 0.2rem !important;
  color: #333 !important;
}
.grjbxx_allbox .el-input.is-disabled .el-input__inner {
  background: #ffffff;
}
</style>
<style scoped>
.ryxx_zs_box {
  display: flex;
  align-items: center;
  /* justify-content: space-between; */
  flex-wrap: nowrap;
  border-left: 1px solid #ebeef5;
  min-height: 56px;
  /* background: red; */
}
.ryxx_zs_item {
  width: 45%;
  min-height: 56px;
  border-bottom: 1px solid #ebeef5;
  display: flex;
  align-items: center;
  border-right: 1px solid #ebeef5;
}
.ryxx_zs_item_title {
  font-size: 0.2rem;
  font-family: Microsoft YaHei;
  color: #333;
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 2.1625rem;
  min-height: 56px;
  border-right: 1px solid #ebeef5;
}
.button_box_jb {
  display: flex;
  width: 2.875rem;
  justify-content: space-between;
  margin-top: 0.2625rem;
  margin-left: 0.8875rem;
  padding-bottom: 0.5rem;
}
.button_box_jb .zc,
.xyb,
.hs {
  width: 1.25rem;
  height: 0.5rem;
  background: #1954a4;
  border-radius: 0.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.2rem;
  font-weight: 400;
  color: #ffffff;
  cursor: pointer;
}
.button_box_jb .xyb {
  background: #fca204;
}
.button_box_jb .xyb:hover {
  background: #e9a125;
}

.ryxx_zs_box .xyb {
  height: 55px;
  background: red;
  margin-left: 18px;
}
.ryxx_zs_box .xyb:hover {
  background: rgb(252, 28, 28);
}
.button_box_jb .zc,
.xyb,
.hs {
  width: 1.25rem;
  height: 0.5rem;
  background: #1954a4;
  border-radius: 0.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.2rem;
  font-weight: 400;
  color: #ffffff;
  cursor: pointer;
}
.hs {
  background: #7c7c7c;
}
.hs:hover {
  background: #9c9a9a;
}
.button_box_jb .zc:hover {
  background: #1f5fb8;
}
.button_box_jb .xyb {
  background: #fca204;
}
.button_box_jb .xyb:hover {
  background: #e9a125;
}
.xtitle {
  height: 0.6375rem;
  background: #fafafa;
  border-left: 1px solid #f2f2f2;
  border-right: 1px solid #f2f2f2;
  display: flex;
  align-items: center;
  padding-left: 0.1375rem;
  font-size: 0.2rem;
  font-weight: 400;
  color: #1954a4;
}
.colltitle {
  display: flex;
  width: 100%;
}
.colltitle span {
  width: 50%;
  text-align: center;
}
.collimg_box {
  margin-top: 0.3375rem;
}
.grhyjbxx .addbook {
  height: 0.6375rem;
  background: #fafafa;
  border: 1px solid #f2f2f2;
  font-size: 0.2rem;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #1954a4;
  padding-left: 0.3rem;
  display: flex;
  align-items: center;
}

.grhyjbxx .addbook span:hover {
  cursor: pointer;
  color: #3e74c0 !important;
}
.table_add {
  font-size: 0.2rem;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #1954a4;
  line-height: 0.375rem;
  cursor: pointer;
}
.table_add:hover {
  color: #6b81a0;
}
.table_add_box {
  margin: 0.125rem 0 0 0.5rem;
}
::v-deep .el-table .el-button {
  font-size: 0.2rem;
}
::v-deep .el-input__prefix {
  left: 151px;
  top: 4px;
}
::v-deep .el-textarea {
  font-size: 16px;
}
</style>
